<template>
  <div class="map-view">
    <div class="backBut" @click="handleBack"><svg-icon class="svg-icon" icon-class="BackMulv" /></div>
    <div :class="active == '1' ? 'Active22' : ''" id="map"></div>
    <!-- 上方下拉框 -->
    <div class="AllSelectBox">
      <SeleBox :list="farmList" :setFromData="setFromData" :obj="fromData.farm_code" str="farm_code"></SeleBox>
      <SeleBox :list="teamList" :setFromData="setFromData" :obj="fromData.team_code" str="team_code"></SeleBox>
      <SeleBox :list="StroageList" :setFromData="setFromData" :obj="fromData.stroageCode" str="stroageCode"></SeleBox>
    </div>
    <!-- 左下图例 -->
    <div class="tuliBox">
      <div class="title"><svg-icon class="svg-icon" icon-class="Tuli" />图例</div>
      <div class="conter">
        <!-- 图例列表 -->
        <div class="item">
          <img src="../../../../public//flat.png" alt="">
          <span>平仓</span>
        </div>
        <div class="item">
          <img src="../../../../public//vertical.png" alt="">
          <span>竖仓</span>
        </div>
        <div class="item">
          <img src="../../../../public//temporary.png" alt="">
          <span>临时仓</span>
        </div>
        <div class="item">
          <img src="../../../../public//New.png" alt="">
          <span>新增仓</span>
        </div>
      </div>
    </div>
    <!-- 右下切换底图 -->
    <div class="ChangeDt">
      <div class="title"><svg-icon class="svg-icon" icon-class="dituSvg" />地图</div>
      <div class="conter">
        <!-- 图例列表 -->
        <img @click="ChangeDt(0)" :class="['item', active == 0 ? 'item1' : '']" src="../../../../public//MapBig1.png"
          alt="">
        <img @click="ChangeDt(1)" :class="['item', active == 1 ? 'item1' : '']" src="../../../../public//MapBig2.png"
          alt="">
        <img @click="ChangeDt(2)" :class="['item', active == 2 ? 'item1' : '']" src="../../../../public//MapBig3.png"
          alt="">
      </div>
    </div>
    <!-- 保存按钮 -->
    <div class="SaveBox">
      <div class="conter"><svg-icon @click="() => { saveActive = !saveActive }"
          :class="['svg-icon', saveActive ? 'aaa' : '']" icon-class="MapSave" />
        <div class="text">绘制粮仓保存</div>
      </div>
      <div class="conter"><svg-icon @click="showFunc" class="svg-icon" icon-class="MapSaveBuon" />
        <div style="margin-left: 40px;" class="text">保存</div>
      </div>
    </div>
    <!-- 详情弹窗 -->
    <div id="MapInfo" v-show="infoBoxFlag">
      <div class="bacc">
        <div class="title">仓储信息</div>
        <div class="conter">
          <div class="left">
            <div></div>
          </div>
          <div class="right">
            <div>农场名称：{{ infoBoxObj.farmName }}</div>
            <div>生产队名称：{{ infoBoxObj.teamName }}</div>
            <div>仓号：{{ infoBoxObj.warehouseNumber }}</div>
            <div>负责人：{{ infoBoxObj.personName }}</div>
            <div>仓储作物：{{ infoBoxObj.cropType }}</div>
          </div>
        </div>
      </div>

    </div>
    <!-- 保存弹窗 -->
    <AddPopu ref="addPopu" :showDialog.sync="showAddDialog" @handleRefresh="getPointList"></AddPopu>
  </div>
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import { transform } from 'ol/proj'
import Control from 'ol/control/Control'
import { ScaleLine, defaults } from "ol/control";
import Overlay from 'ol/Overlay'
import { fromLonLat } from 'ol/proj'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { GeoJSON } from "ol/format";
import { ImageWMS, Vector } from "ol/source";
import Polygon from "ol/geom/Polygon";
import { DoubleClickZoom } from 'ol/interaction'
import { Circle, Fill, Icon, Stroke, Style, Text } from "ol/style";
import XYZ from "ol/source/XYZ";
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';
import axios from 'axios';
import SeleBox from '@/components/SelectBox'
import AddPopu from '../dialog/AddPopu2.vue'
import { selectApi, cropinfoSelectApi } from '@/api/select'
import { tableApi } from '@/api/cageMange'
import { getInfo } from '../../../utils/auth'
export default {
  props: ['drawCenter'],
  components: {
    SeleBox,
    AddPopu
  },
  data() {
    return {
      saveActive: false,  // 绘制粮仓保存是否高
      active: 0,
      fromData: {
        farm_code: {
          label: '选择农场',
          value: ''
        },
        team_code: {
          label: '选择生产队',
          value: ''
        },
        stroageCode: {
          label: '选择仓库',
          value: ''
        }
      },
      infoBoxObj: {},
      farmList: [],
      teamList: [],
      StroageList: [],
      SelectList: {},
      layers: [
        {
          name: "天地图影像图层",
          url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.$key}`,
          visible: true,
          className: "12",
        },
        {
          name: "天地图矢量图层",
          url: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.$key}`,
          visible: false,
          className: "blueLayer2",
        },
        {
          name: "天地图矢量注记图层",
          url: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.$key}`,
          visible: false,
          className: "blueLayer",
        },
      ],
      InitializeData: [],
      vectorLayerPointList: [],
      vectorLayerPoint: null,
      showAddDialog: false,
      userInfoObj: JSON.parse(getInfo()),
      vectorLayerPoint2: null,
      overlay: null,
      infoBoxFlag: false,
    }
  },
  methods: {
    showFunc() {
      if (this.vectorLayerPoint != null) {
        this.showAddDialog = true;

        if (this.$status == '1') {
          this.$refs.addPopu.ruleForm = {
            ...this.centerArr,
            farmCode: this.$farmCode,
          }
        }
        if (this.$status == '2') {
          this.$refs.addPopu.ruleForm = {
            ...this.centerArr,
            farmCode: this.$farmCode,
            teamCode: this.$teamCode
          }
        }

        this.$refs.addPopu.carList = {
          storageList: this.StroageList,
          farmList: this.farmList,
          teamList: this.teamList,
        }
      }
    },
    // 切换底图
    toggleLayer(type) {
      if (this.layers[type].visible /* || this.layers[zhuji].visible */) return;
      // 切换图层的可见性和样式
      this.layers.forEach((layer, i) => {
        layer.visible = i === type /* || i === zhuji */;
      });
      this.map.getLayers().forEach((layer, i) => {
        layer.setVisible(i === type /* || i === zhuji */);
      });
      this.layviewSheng()
      // this.map.getView().setZoom(5);
    },
    initMap() {
      const TMap_layers = this.layers.map((layer) => {
        return new TileLayer({
          className: layer.className,
          source: new XYZ({
            url: layer.url,
          }),
          visible: layer.visible,
        })
      });
      let center = [];
      let zoomIndex = ''
      if (this.$status == '0') {
        center = [122.198822622133, 49.2952782177651]
        zoomIndex = 8.5
      } else {
        const aa = this.InitializeData.filter((item) => { return item.properties.farm_code == this.$farmCode })[0].properties;
        center = [aa.lon, aa.lat]
        zoomIndex = 11;
      }
      if (this.drawCenter && this.drawCenter.length) {
        center = this.drawCenter;
        zoomIndex = 16;
      }
      this.map = new Map({
        target: "map",
        // 设置图层
        layers: TMap_layers,
        controls: defaults({
          zoom: false, // 隐藏缩放控件
          attribution: false, // 隐藏信息控件
        }),
        ZIndex: 1111,
        viewMode: "3D",
        view: new View({
          center: center,
          // 设置地图放大级别
          zoom: zoomIndex,
          minZoom: 5,
          maxZoom: 18,
          projection: "EPSG:4326",
        }),
      });
      document.oncontextmenu = function () {
        return false;
      };
    },
    // 给地图添加事件
    handleMapClick() {
      let that = this;
      this.map.on('singleclick', function (e) {
        const feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature) {
          try {
            return feature;
          } catch (err) { }
          feature.dispatchEvent && feature.dispatchEvent({ type: "click", e });
        });
        that.infoBoxFlag = false;
        if (that.saveActive) {
          that.setImage(e.coordinate)
        }
        if (feature && feature.getGeometry() instanceof Point && feature.get("WareHouseId")) {
          that.feature_Info(feature)
        }
      });
      this.map.getViewport().oncontextmenu = function (event) {
        event.preventDefault();
        let pixel = that.map.getEventPixel(event);
        let feature = that.map.forEachFeatureAtPixel(pixel,
          function (feature, layer) {
            //根据像素坐标获取右键选中的地图要素
            if (feature.id_ == 'NewPoint') {
              that.map.removeLayer(that.vectorLayerPoint)
              that.vectorLayerPoint = null
            }
          }
        );
      };
    },
    feature_Info(item, id) {
      this.infoBoxObj = {}
      this.overlay = new Overlay({
        element: document.getElementById('MapInfo'),
        positioning: 'top-left',
        stopEvent: true,
        offset: [40, -120]
      });
      this.infoBoxFlag = true;
      this.map.addOverlay(this.overlay);
      // 当需要显示 Overlay 时，设置其位置和内容.
      this.overlay.setPosition([item.get("lon"), item.get("lat")]);
      // this.infoBoxObj = item;
      this.infoBoxObj = {
        id: item.get("WareHouseId"),
        cropType: item.get("cropType"),
        current: item.get("current"),
        rated: item.get("rated"),
        warehouseNumber: item.get("warehouseNumber"),
        personName: item.get("personName"),
        farmName: item.get("farmName"),
        teamName: item.get("teamName"),
      }
      this.get(item.get("rated"), item.get("current"))
    },
    async getCustom(rated, current) {
      // let res = await customApi(data)
      // this.farmCustom = res.data.data.custom
      // this.farmCustom.forEach(item => {
      //     this.farmCustomTotal += item.total
      // })
      this.farmClientPercentList = res.data.data.farm
      var myChart1 = echarts.init(document.getElementById('top-left-left-chart'));
      var option1;
      const colorList = [
        'RGBA(255, 144, 62, 1.0)',
      ]
      const xData = [];
      const yData = [];
      const indexList = [];
      const totalList = [];
      const totalList2 = [];
      this.farmClientPercentList.forEach((item, index) => {
        this.farmClientPercentListTotal += item.total
        xData.push(item.farmName)
        yData.push({ value: item.total, itemStyle: { color: colorList[index] } })
        indexList.push(index)
      })
      yData.forEach((item, index) => {
        totalList.push({ value: this.farmClientPercentListTotal, itemStyle: { color: colorList[index].replace('1.0', '.2') } })
        totalList2.push({ value: this.farmClientPercentListTotal, itemStyle: { color: colorList[index].replace('1.0', '.4') } })
      })
      option1 = {
        "grid": {
          "top": "25%",
          "left": "-5%",
          "bottom": "5%",
          "right": "5%",
          "containLabel": true
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => { //格式化数据的函数
            return '<div>' + params[0].name + '--' + params[0].value + '</div>'
          },
          textStyle: {
            fontSize: 26
          }
        },
        animation: false,
        "xAxis": [{
          "type": "category",
          "data": xData,
          "axisTick": {
            "alignWithLabel": true
          },
          "nameTextStyle": {
            "color": "#82b0ec"
          },
          "axisLine": {
            show: false,
            "lineStyle": {
              "color": "#82b0ec"
            }
          },
          "axisLabel": {
            "textStyle": {
              fontSize: 26,
              "color": "#fff"
            },
            margin: 30
          }
        }],
        "yAxis": [{
          show: false,
          "axisLabel": {
            "textStyle": {
              fontSize: 27,
              "color": "#fff"
            },
          }
        }],
        "series": [
          {
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            color: "#2DB1EF",
            data: yData
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, 7],
            z: 12,
            "color": "#2DB1EF",
            "data": yData
          },
          {
            type: 'bar',
            //silent: true,
            "barWidth": "40",
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
              normal: {
                color: '#38B2E6',
              }
            },

            data: yData
          },
          {
            type: 'bar',
            //silent: true,
            barWidth: "40",
            z: 1,
            barGap: '-100%', // Make series be overlap
            // barCateGoryGap: '10%',
            itemStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            },
            data: totalList
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, 0],
            z: 3,
            symbolPosition: "end",
            itemStyle: {
              color: "#0D7DA3",
              opacity: 0.7
            },
            // 设置最大数据，可以不设置data，默认为真实数据的最大值MoneyTotal
            data: totalList2
          },
        ]
      };
      option1 && myChart1.setOption(option1);
      this.renderBarChart("chartsPie", this.farmCustom)
    },
    hideOver() {
      if (this.overlay) {
        this.overlay.setPosition(undefined);
        this.infoBoxFlag = false;
        this.accctive = 0
      }
    },
    setImage(arr, type) {
      if (this.vectorLayerPoint != null) {
        this.map.removeLayer(this.vectorLayerPoint)
        this.vectorLayerPoint = null
      }
      // 矢量源
      const source = new VectorSource()
      // 矢量图层
      const vectorLayerPoint = new VectorLayer({
        source: source,
      });
      const styles = new Style({
        image: new Icon({
          src: 'New.png',
          scale: 0.25,
          anchor: [0.5, 1]
        }),
      })
      const pointFeature = new Feature({
        geometry: new Point(arr),
      });
      pointFeature.setId('NewPoint');
      pointFeature.setStyle(styles);
      source.addFeature(pointFeature);
      vectorLayerPoint.setZIndex(999999)
      this.vectorLayerPoint = vectorLayerPoint;
      this.centerArr = {
        lon: arr[0],
        lat: arr[1]
      }
      // 将图层添加地图上
      this.map.addLayer(vectorLayerPoint);
    },
    setsetImageList(data) {
      if (this.vectorLayerPoint2 !== null) {
        this.map.removeLayer(this.vectorLayerPoint2)
        this.vectorLayerPoint2 = null
      }
      // 矢量源
      const source = new VectorSource()
      // 矢量图层
      const vectorLayerPoint = new VectorLayer({
        source: source,
      });
      data.forEach((item) => {
        let str = ''
        if (item.warehouseType == '平仓') {
          str = 'flat.png'
        } else if (item.warehouseType == '竖仓') {
          str = 'vertical.png'
        } else {
          str = 'temporary.png'
        }
        const styles = new Style({
          image: new Icon({
            src: str,
            scale: 0.25,
            anchor: [0.5, 1]
          }),
        })
        const pointFeature = new Feature({
          geometry: new Point([item.lon, item.lat]),
          WareHouseId: item.id,
          cropType: item.cropType,
          current: item.current,
          rated: item.rated,
          warehouseNumber: item.warehouseNumber,
          personName: item.personName,
          farmName: item.farmName,
          teamName: item.teamName,
          lon: item.lon,
          lat: item.lat,
        });
        pointFeature.setId('Point' + item.id);
        pointFeature.setStyle(styles);
        source.addFeature(pointFeature);
      })
      // arr,type,id
      vectorLayerPoint.setZIndex(999999)
      this.vectorLayerPoint2 = vectorLayerPoint;
      // 将图层添加地图上
      this.map.addLayer(vectorLayerPoint);

    },
    handleBack() {
      this.$emit('handleBack')
      document.oncontextmenu = function () {
        return true;
      };
    },
    setFromData(str, str2) {
      this.fromData[str] = {
        label: str2.label,
        value: str2.value,
      };
      // 切换中心点
      this.InitializeData.forEach((item, index) => {
        if (str != 'stroageCode' && item.properties[str] == str2.value) {
          this.map.getView().animate({
            // 只设置需要的属性即可
            center: [item.properties.lon, item.properties.lat], // 中心点
            zoom: 11, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
        }
        if (str2.value == '000') {
          this.map.getView().animate({
            // 只设置需要的属性即可
            center: [122.198822622133, 49.2952782177651], // 中心点
            zoom: 8.5, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
        }
      })
      if (str == 'farm_code' && str2.value != '000') {
        selectApi({ type: str2.value }).then((res) => {
          this.teamList = res.data.dictItemList;
        })
        this.fromData.team_code = {
          label: '选择生产队',
          value: '0'
        }
      }
      this.getPointList()
    },
    ChangeDt(num) {
      this.active = num;
      this.toggleLayer(num)
    },
    // 取消地图双击放大
    handleCancelDb() {
      // 取消地图双击放大
      const dblClickInteraction = this.map
        .getInteractions()
        .getArray()
        .find((interaction) => {
          return interaction instanceof DoubleClickZoom;
        });
      this.map.removeInteraction(dblClickInteraction);
    },
    // 农场边界绘制
    layviewSheng() {
      // 农场边界 http://223.0.40.4:5999/geoserver/soil_grid/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=soil_grid%3Apolygon_data_hlbe_bj&outputFormat=application%2Fjson
      this.InitializeData.forEach((item) => {
        const source = new Vector({
          features: new GeoJSON().readFeatures(item),
        });
        const Farmfeature = new Feature({});
        Farmfeature.setId(item.id);
        source.addFeature(Farmfeature);
        const resXLayer = new VectorLayer({
          id: item.id,
          className: "xamLayer",
          source: source,
          zIndex: 999,
          style: new Style({
            // 背景色
            fill: new Fill({
              // color: 'rgba(90, 227, 133,.1)',
              color: "rgba(17,61,50,.2)",
            }),
            // 边框
            stroke: new Stroke({
              // color: '#fff396',
              color: "rgba(63,255,186,1)",
              width: 2,
            }),
            text: new Text({
              // 位置
              textAlign: "center",
              // 基准线

              textBaseline: "middle",
              // 文字样式
              font: "15px 微软雅黑",
              // 文本内容
              text: item.properties.team_name,
              // 文字颜色
              fill: new Fill({
                color: "#fff",
              }),
            }),
            image: new Icon({
              anchor: [0.5, 0.5], //图标的锚点,经纬度点所对应的图标的位置，默认是[0.5, 0.5]，即为标注图标的中心点位置
              anchorOrigin: "top-right", //锚点的偏移位置，默认是top-left，
              anchorXUnits: "fraction", //锚点X的单位，默认为百分比，也可以使用px
              anchorYUnits: "pixels", //锚点Y的单位，默认为百分比，也可以使用px
              offsetOrigin: "top-right", //原点偏移bottom-left, bottom-right, top-left, top-right,默认 top-left
              scale: 0.7, //可以设置该比例实现，图标跟随地图层级缩放
              src: "mark.png",
            }),
          }),
        });
        this.vectorLayerPointList.push(resXLayer);
        this.map.addLayer(resXLayer);
      });
    },
    // 农场边界请求
    createFarm() {
      axios
        .get(
          `http://223.0.40.4:5999/geoserver/soil_grid/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=soil_grid%3Apolygon_data_hlbe_farm&outputFormat=application%2Fjson`
          // "http://223.0.40.4:5999/geoserver/soil_grid/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=soil_grid%3Apolygon_data_hlbe_farm&outputFormat=application%2Fjson"
        )
        .then((ress) => {
          this.InitializeData = ress.data.features
          const datata = ress.data.features.filter((item) => {
            return item.properties.farm_code == this.$farmCode
          })[0].properties
          this.initMap([datata.lon, datata.lat])
          this.layviewSheng()
          // 添加监听事件
          this.handleMapClick();
          // 禁止双击放大
          this.handleCancelDb();
          this.getPointList()


        });
    },
    changeFram(e) {
      selectApi({ type: e }).then((res) => {
        this.teamList = res.data.dictItemList
        this.fromData.team_code = this.teamList.filter((item) => { return item.value == this.$teamCode })[0]
      })
    },
    // 初始下拉框
    async handleGetSelect() {
      // let res = await selectApi({ type: 'car_type' })
      const list = ['warehouse_type', "farm_type"];
      const ProList = list.map((item) => {
        return selectApi({ type: item })
      })
      ProList.push(cropinfoSelectApi())
      Promise.all(ProList).then(async (res) => {
        this.StroageList = res[0].data.dictItemList
        this.farmList = res[1].data.dictItemList;
        if (this.$status == '0') {
          this.farmList.unshift({ label: '农垦集团', value: "000" })
        }
        if (this.$status == '1') {
          this.farmList = res[1].data.dictItemList.filter((item) => { return item.value == this.$farmCode })
          this.fromData.farm_code = this.farmList[0]
          let teamArr = await selectApi({ type: this.fromData.farm_code.value })
          this.teamList = teamArr.data.dictItemList
        }
        if (this.$status == '2') {
          this.farmList = res[1].data.dictItemList.filter((item) => { return item.value == this.$farmCode })
          this.fromData.farm_code = this.farmList[0]
          let teamArr = await selectApi({ type: this.fromData.farm_code.value })
          this.teamList = teamArr.data.dictItemList.filter(item => item.value == this.$teamCode)
          this.fromData.team_code = this.teamList[0]
        }
        // this.getPointList()
      })
    },
    async getPointList() {
      const { data } = await tableApi({
        warehouseType: this.fromData.stroageCode.value,
        farmCode: this.fromData.farm_code.value,
        teamCode: this.fromData.team_code.value,
        cropType: '',
        warehouseNumber: '',
        rated: '',
        startDate: '',
        endDate: ''
      }, {
        current: 1,
        size: 10000
      })
      this.saveActive = false
      this.setsetImageList(data.records)
      // data.records.forEach((item)=>{
      //   (,item.warehouseType,item.id)
      // })
    },
  },
  mounted() {
    this.handleGetSelect();
    this.createFarm();


  }
}
</script>
<style>
::deep(.blueLayer) {
  filter: grayscale(100%) sepia(20%) invert(100%) saturate(100%);
}
</style>

<style lang='scss' scoped>
::deep(.blueLayer) {
  // grayscale 陆地与海洋 色差    sepia 蓝色亮度深浅   invert 蓝色程度深浅  saturate 值越大越蓝
  filter: grayscale(100%) sepia(20%) invert(100%) saturate(100%);
}

.SaveBox {
  position: absolute;
  right: 20px;
  top: 200px;

  .svg-icon {
    width: 50px;
    height: 50px;
    padding: 10px;
    background-color: #fefefe;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 10px;
  }

  .aaa {
    background: linear-gradient(#6e6e6e 0%, #fefefe 100%);
  }

  .conter {
    position: relative;

    .text {
      position: absolute;
      top: 20px;
      height: 30px;
      line-height: 20px;
      left: -70px;
      background-color: #16a085;
      font-size: 10px;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 10px;
      color: #fff;
    }
  }
}

.ChangeDt {
  width: 240px;
  height: 170px;
  background-color: #16a085;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(22, 116, 94, 1);
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding-top: 10px;

  .title {
    display: flex;
    flex-direction: row;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    margin-left: 20px;

    .svg-icon {
      height: 30px;
      margin: 5px 10px;
    }
  }

  .conter {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .item {
      width: 60px;
      height: 90px;
      cursor: pointer;
    }

    .item1 {
      border: 2px solid #fff;
    }

  }
}

.tuliBox {
  width: 160px;
  height: 280px;
  background-color: #16a085;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(22, 116, 94, 1);
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding-top: 10px;

  // align-items: center;
  // justify-content: space-between;
  .title {
    display: flex;
    flex-direction: row;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    margin-left: 20px;

    .svg-icon {
      height: 30px;
      margin: 5px 10px;
    }
  }

  .conter {
    margin-left: 20px;

    .item {
      display: flex;
      flex-direction: row;
      line-height: 50px;

      img {
        width: 50px;
        height: 50px;
      }
    }

  }
}

.app-container {
  padding: 0 !important;
}

.AllSelectBox {
  width: 900px;
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -450px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.map-view {
  width: 100%;
  height: calc(100vh - 50px);
  position: relative;
}

.backBut {
  position: absolute;
  z-index: 111;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #16a085;
  border-radius: 10px;
  cursor: pointer;
}

.svg-icon {
  margin: 10px 10px;
  width: 30px;
  height: 30px;
}

.Active22 {
  //grayscale 陆地与海洋 色差    sepia 蓝色亮度深浅   invert 蓝色程度深浅  saturate 值越大越蓝
  filter: grayscale(80%) sepia(20%) invert(100%) saturate(100%);
}

#map {
  width: 100%;
  height: 100%;
  cursor: url(https://webapi.amap.com/theme/v1.3/openhand.cur), default;
}

#MapInfo {
  background: url("../../../assets//dashboard//mapInfo.png");
  padding: 30px;
  width: 400px;
  height: 300px;
  background-size: 100% 100%;

  color: #bdc9d3;

  .bacc {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 30px;
    box-shadow: 0 0px 40px #000;
    width: 100%;
    height: 100%;

    .title {
      color: #aaf4ff;
      font-size: 30px;
    }

    .conter {
      display: flex;
      flex-direction: column;

      .left {
        width: 30%;
        height: 100%;
        background: url("../../../assets//dashboard//yuanhuan.png");
        background-size: 100% 100%;
      }
    }
  }
}
</style>
